<template>
  <div class="big-body product-detail">
    <van-nav-bar
      placeholder
      fixed
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 轮播图 -->
    <Swiper :imgList="imgList"></Swiper>

    <!-- 商品介绍 -->
    <Info :detail="detail"></Info>

    <!-- 图文详情 -->
    <Goods :imgList="detail.descPics"></Goods>

    <!-- 购物底部 -->
    <footer class="flex aic jc-sb fixed bg-fff w100p">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon icon="like" text="已收藏" color="#ff5000" />
        <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartNum ? cartNum : ''" @click="goToCart" />
        <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
        <van-goods-action-button type="danger" text="立即购买" @click="goToOrder" />
      </van-goods-action>
    </footer>
  </div>
</template>

<script>
import request from "../../../utils/request";
import Swiper from "./detail/Swiper.vue";
import Info from "./detail/Info.vue";
import Goods from "./detail/Goods.vue";

export default {
  components: {
    Swiper,
    Info,
    Goods,
  },
  data() {
    return {
      cartNum: 0, // 购物车数量
      id: "",
      detail: {}, // 商品详情
      imgList: [], // 轮播图列表
    };
  },
  created() {
    this.id = this.$route.params.id;
    console.log('Product ID:', this.id); // 打印参数
    this.getDetail();
    // 添加历史记录（足迹）
    this.addHistory();
  },
  mounted() {
    // 确保页面滚动到顶部
    window.scrollTo(0, 0);
  },
  methods: {
    // 添加历史记录
    addHistory() {
      request.post('/history/add', { productId: this.id });
    },
    // 获取商品详情
    async getDetail() {
      try {
        const res = await request.get("/product/detail", {
          params: { productId: this.id },
        });
        if (res && res.result) {
          this.detail = res.result;
          this.imgList = res.result.banners || [];
          // 给购物车赋值
          this.cartNum = res.result.cartNum;
        } else {
          console.error("No result found in response:", res);
          this.$toast("加载商品详情失败，请稍后再试");
        }
      } catch (error) {
        console.error("Failed to fetch detail:", error);
        this.$toast("加载商品详情失败，请稍后再试");
      }
    },
    // 添加购物车
    async addCart() {
      // alert('加入购物车成功');
      // let res = await request.post("/cart/add", { productId: this.productInfo.productId });
      // 使用query
      request.post('/cart/add', { productId: this.id }).then(res => {
        this.$router.push({
          // path: '/cart',
          query: {
            orderData: JSON.stringify(res),// 将数组转为JSON字符串     
          }
        });
      })
      this.cartNum++;

    },
    goToCart() {
    this.$router.push('/cart');
  },
  goToOrder() {
    // 将商品详情作为参数传递到确认订单页面
    this.$router.push({
      path: '/order/verift', // 确认订单页面的路径
      query: {
        productDetail: JSON.stringify(this.detail), // 将商品详情对象转为 JSON 字符串
      }
    });
  },
  },
};
</script>

<style lang="less" scoped>
@import "./detail.less";
</style>


